<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第一个vue示例</title>
</head>
<body>
<div id="app">
    <p>{{message}}</p>
    <ul>
        <li v-for="person in persons">
            <todo-item v-bind:todo="person"></todo-item>
        </li>
    </ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script type="text/javascript">
    Vue.component("todo-item",{
        props:["todo"],
        template:"<li>{{todo.name}}</li>"
    })
    var vm=new Vue({
        el:"#app",
        data:{
           message:"你好，vue",
           persons:[
               {name:"吴晓波",age:"21"},
               {name:"李帅豪",age:"22"},
               {name:"朱世创",age:"23"},
           ]
        },
        methods:{

        }
    })
</script>
</body>
</html>